<template>
    <v-row justify="center">
        <v-col
            cols="12"
            style="
                display: flex;
                flex-flow: row wrap;
                justify-content: space-evenly;
            "
        >
            <v-btn
                v-for="(component, index) in componentList"
                :key="index"
                style="flex: 0 0 50%"
                :prepend-icon="component.icon"
                stacked
                variant="text"
                size="x-large"
                :disabled="designStore.disDelete.includes(designStore.currentDomPointer.tag) || !designStore.editCss"
                :style="{ cursor: designStore.disDelete.includes(designStore.currentDomPointer.tag) || !designStore.editCss ? 'not-allowed' : 'default' }"
                @click="component.clickFunc"
                >{{ component.name }}</v-btn
            >
        </v-col>
    </v-row>
</template>
<script>
import { useDesignStore } from '../../../../stores/design'
export default {
    data() {
        return {
            componentList: [],
            designStore: useDesignStore()
        }
    },
    mounted() {
        this.componentList = [
            {
                name: 'div',
                clickFunc: () =>
                    this.designStore.addDom('div'),
                icon: 'mdi-rectangle-outline'
            },
            {
                name: 'span',
                clickFunc: () =>
                    this.designStore.addDom('span'),
                icon: 'mdi-rectangle-outline'
            },
            // {
            //     name: 'ul',
            //     clickFunc: () =>
            //         this.designStore.addDom('ul'),
            //     icon: 'mdi-rectangle-outline'
            // },
            // {
            //     name: 'ol',
            //     clickFunc: () =>
            //         this.designStore.addDom('ol'),
            //     icon: 'mdi-rectangle-outline'
            // },
            // {
            //     name: 'li',
            //     clickFunc: () =>
            //         this.designStore.addDom('li'),
            //     icon: 'mdi-rectangle-outline'
            // },
            {
                name: 'button',
                clickFunc: () =>
                    this.designStore.addDom('button'),
                icon: 'mdi-rectangle-outline'
            },
            {
                name: 'input',
                clickFunc: () =>
                    this.designStore.addDom('input'),
                icon: 'mdi-rectangle-outline'
            },
            {
                name: 'a',
                clickFunc: () =>
                    this.designStore.addDom('a'),
                icon: 'mdi-rectangle-outline'
            },
            {
                name: 'p',
                clickFunc: () =>
                    this.designStore.addDom('p'),
                icon: 'mdi-rectangle-outline'
            }
        ]
    }
}
</script>
